<script setup lang="ts">
import { ref, onMounted } from "vue";
import { renderAsync } from "docx-preview";
const inp = ref();
const show = ref();

const props = defineProps({
  showButton: Boolean,
  default: File
});
const showInput = ref(true);
showInput.value =
  typeof props.showButton == "undefined" ? props.showButton : true;

onMounted(() => {
  let options = {
    inWrapper: false,
    ignoreWidth: true,
    ignoreHeight: true
  }; // https://github.com/VolodymyrBaydalka/docxjs#api
  renderAsync(props.default, show.value, null, options).then(x =>
    console.log("docx: finished")
  );
});

const onGetFile = () => {
  console.log(inp);
  let file = inp.value.files[0];
  console.log("file", file);
  let options = {
    inWrapper: false,
    ignoreWidth: true,
    ignoreHeight: true
  }; // https://github.com/VolodymyrBaydalka/docxjs#api
  renderAsync(file, show.value, null, options).then(x =>
    console.log("docx: finished")
  );
};
</script>

<template>
  <div>
    <input
      v-show="showInput"
      ref="inp"
      id="document"
      type="file"
      :onchange="onGetFile"
      accept=".docx"
    />
    <br />
    <div ref="show" id="container"></div>
  </div>
</template>
